473,440 Members | 1,686 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,440 software developers and data experts.

IE 8 issue in li ul menu

omerbutt
638 512MB
hi all,
i have a menu based on <ul> and <li> it is working fine on mozilla all versions IE 6 and 7 all versions and google chrome ver 2.0.172.31 , the only problem is occuring is with the IE8 here is the link ,or you can see the attachment with of the screen grab.
HERE IS THE CODE FOR THAT MENU
Expand|Select|Wrap|Line Numbers
  1. .suckerdiv ul{
  2.     font-family: Arial, Helvetica, sans-serif;
  3.       font-size: 11px;
  4.     margin-left: 0px;
  5.     margin-right:0px;
  6.     margin-top:0px;
  7.     margin-bottom:0px;
  8.     padding-left:0px;
  9.     padding-right:0px;
  10.     padding-top:0px;
  11.     padding-bottom:0px;
  12.     list-style-type: none;
  13.     width: 201px; /* Width of Menu Items */
  14.     border-bottom: 1px solid #592442;
  15.     background: #6F2F53;
  16. }
  17.  
  18. .suckerdiv ul li{
  19.     font-family: Arial, Helvetica, sans-serif;
  20.       font-size: 11px;
  21.     position: relative;
  22. }
  23.  
  24. /*Sub level menu items */
  25. .suckerdiv ul li ul{
  26.     font-family: Arial, Helvetica, sans-serif;
  27.       font-size: 11px;
  28.     position: absolute;
  29.     width: 150px; /*sub menu width*/
  30.     top: 0;
  31.     visibility: hidden;
  32. }
  33.  
  34. /* Sub level menu links style */
  35. .suckerdiv ul li a{
  36.     font-family: Arial, Helvetica, sans-serif;
  37.       font-size: 11px;
  38.     display: block;
  39.     overflow: auto; /*force hasLayout in IE7 */
  40.     color: #FFFFFF;
  41.     text-decoration: none;
  42.     background: #6F2F53;
  43.     padding: 3px 5px;
  44.     border: 1px solid #592442;
  45.     border-bottom: 0;
  46. }
  47.  
  48. .suckerdiv ul li a:visited{
  49.     font-family: Arial, Helvetica, sans-serif;
  50.       font-size: 11px;
  51.     color: #fff;
  52. }
  53.  
  54. .suckerdiv ul li a:hover{
  55.     font-family: Arial, Helvetica, sans-serif;
  56.       font-size: 11px;
  57.     background-color: #6F2F53;
  58.     color: #FF0090;
  59. }
  60.  
  61. .suckerdiv .subfolderstyle{
  62.     font-family: Arial, Helvetica, sans-serif;
  63.       font-size: 11px;
  64.     text-align:left;
  65.     padding-left:50px;
  66.     background: url(../images/arrow.gif) no-repeat center left;
  67. }
  68. /* Holly Hack for IE \*/
  69. * html .suckerdiv ul li { float: left; height: 1%; }
  70. * html .suckerdiv ul li a { height: 1%; }
  71. /* End */
  72.  
Expand|Select|Wrap|Line Numbers
  1. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
  2.  
  3. function buildsubmenus(){
  4. for (var i=0; i<menuids.length; i++){
  5.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  6.     for (var t=0; t<ultags.length; t++){
  7.     ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  8.         if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
  9.             ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  10.         else //else if this is a sub level submenu (ul)
  11.           ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
  12.     ultags[t].parentNode.onmouseover=function(){
  13.     this.getElementsByTagName("ul")[0].style.display="block"
  14.     }
  15.     ultags[t].parentNode.onmouseout=function(){
  16.     this.getElementsByTagName("ul")[0].style.display="none"
  17.     }
  18.     }
  19.         for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  20.         ultags[t].style.visibility="visible"
  21.         ultags[t].style.display="none"
  22.         }
  23.   }
  24. }
  25.  
  26. if (window.addEventListener)
  27. window.addEventListener("load", buildsubmenus, false)
  28. else if (window.attachEvent)
  29. window.attachEvent("onload", buildsubmenus)
  30.  
Expand|Select|Wrap|Line Numbers
  1.             <?
  2.             function createMenu($parId){
  3.                 $q="select 
  4.                     c.cat_id,
  5.                     c.parent_id,
  6.                     cd.cat_name
  7.                 from
  8.                     ".CATEGORY." c,
  9.                     ".CATEGORY_DESCRIPTION." cd
  10.                 where
  11.                     (c.cat_id=cd.cat_id)
  12.                 and
  13.                     (c.parent_id='$parId')";
  14.                 $r=execute($q);
  15.                 while($row_cat=mysql_fetch_array($r)){
  16.                     $q_s="select c.cat_id, cd.cat_name from ".CATEGORY." c, ".CATEGORY_DESCRIPTION." cd where (c.cat_id=cd.cat_id) and c.parent_id='$row_cat[cat_id]'";
  17.                     $r_s=execute($q_s);
  18.                     $noRows=mysql_num_rows($r_s);
  19.                     if($noRows > 0){?>
  20.                         <li><a href="javascript:ProductList(<?=$row_cat['cat_id'];?>);" onclick=""><?=$row_cat['cat_name'];?></a>
  21.                             <ul>
  22.                                 <li><? createMenu($row_cat['cat_id']);?></li>
  23.                             </ul>
  24.                         </li>
  25.                     <? }else{?>
  26.                         <li><a href="javascript:ProductList(<?=$row_cat['cat_id'];?>);" onclick=""><?=$row_cat['cat_name'];?></a></li><? 
  27.                     }
  28.                 }//end while
  29.             }?>
  30.             <div class="suckerdiv">
  31.                 <ul id="suckertree1">
  32.                 <? createMenu(0);?>
  33.                 </ul>
  34.             </div>
  35.  
if any one can guide.
regards,
Omer Aslam
Attached Images
File Type: jpg screen grab.jpg (19.3 KB, 1316 views)
Jun 17 '09 #1

✓ answered by Markus

First of all, validate your page (list of errors here)

Note: you have an error in your <meta http-equiv... charset=charset=utf-8> I think you can see the problem there.

5 14793
Markus
6,050 Expert 4TB
The problem being?
Jun 17 '09 #2
omerbutt
638 512MB
@Markus
kindly see the screen grab and the live site you will notice the error in the left menu the sub-categories menu is appearing under the main-category menu where as it should be hidden and should appear when we hover the main-category
reagrds,
OMer Aslam
Jun 17 '09 #3
Markus
6,050 Expert 4TB
First of all, validate your page (list of errors here)

Note: you have an error in your <meta http-equiv... charset=charset=utf-8> I think you can see the problem there.
Jun 17 '09 #4
Dormilich
8,658 Expert Mod 8TB
just out of interest, why do you force Javascript on the Suckerfish menu? (except for IE, it usually works without Javascript)
Jun 17 '09 #5
omerbutt
638 512MB
@Markus
thanks markus good thing pointed out as i fixed all my pages i found out the error it was where i was creating the menu i was calling the creatmenu () inside the li instead of ul and there where the creatmenu () function was written it started with an li too so this is al fixed for IE 8 there was no javascript issue as dormilich was saying
Jun 23 '09 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: michaelzap | last post by:
I can't seem to remove some extra margin/padding from my design on this site: http://www.kyowa-usa.com/ IE displays it properly (no space between the menus and other elements and the outer...
2
by: JMCN | last post by:
hi i'm having a problem with the customize a shortcut menu. i read the ms office assistance: customize a shortcut menu/delete a command or add to a shortcut menu and followed the simple...
2
by: lukasz | last post by:
I call contextMenu.Show() in OnMouseDown handler the menu shows and then I press mouse button in other area to hide the menu (without selecting an option). Then I receive first OnMouseUp event,...
0
by: Matthew Dill | last post by:
I am attempting to use the following code: Me.LayoutMdi(MdiLayout.TileHorizontal) However, when this code runs the MDI children currently being displayed are not tiled. Nothing happens at...
2
by: John Smith | last post by:
I am trying to use the menu control for a tabbed menu system but it's frustrating the hell out of me. The full code is listed below. The trouble that I'm having is that, when the user clicks on a...
1
by: flutetones | last post by:
http://67.189.52.24/~metafusionserver/public_html/training.php Here is a link to my server. I have an issue that doen't make sense. What's hapening is this . . . What's going right . . .
12
by: Reg (Lincolnshire) | last post by:
Converted an A2003 system to A2007, on testing founf out that right- click to bring up a shortcut menu on a combo box didn't work if the combo box was in a subform. Found out that this was a...
4
by: JimmyGiraffe | last post by:
I have some javascript written for a dropdown menu that works fine if my page is an html page, but if I save it as an aspx page it messes up. I'm using an asp grid view control, so I need it to be...
2
by: DragonMaster | last post by:
Hi all, I am using IE6, and have a problem with css (nearly) only flyout menus. In firefox, it works fine, but in IE6 with the csshover.htc behaviour, I am finding that the 2nd level menu items...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.